<template>
  <view style="padding: 20rpx 32rpx;">
    <view class="" style="display: flex;margin-top: 134rpx;justify-content: center;align-items: center;">
      <view class="" style="color:#5C5A55;font-size: 24rpx;">支付剩余时间</view>
      <view class="" style="font-size: 24rpx;color: #E83241;"><u-count-down :show-hours="false" color="#ff0000" :timestamp="timestamp"></u-count-down></view>
    </view>
    <view class="" style="text-align: center;font-size: 48rpx;font-weight: bold;color: #000;margin-top: 15rpx;">￥{{ orDerobj.total_fee }}</view>
    <view class="" style="text-align: center;font-size: 28rpx;font-weight: 500;color: #0A0A09;margin-top: 15rpx;">实付金额</view>
    <!-- 下方的 -->
    <view class="" style="display: flex;justify-content: space-between;align-items: center;margin-top: 140rpx;">
      <view class="" style="display: flex;align-items: center;">
        <image src="/static/lzl/weiPay@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
        <view class="" style="font-size: 32rpx;font-weight: 500;color: #000;margin-left: 20rpx;">微信支付</view>
      </view>
      <image src="/static/lzl/Group 20@2x.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
    </view>
    <!-- 下方的按钮 -->
    <view class="btn" @click="btn">确认支付￥{{ orDerobj.total_fee }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      obj: {},
      orDerobj: {},
      createtime: '',
      expired_time: '',
      timestamp: ''
    };
  },
  onLoad(options) {
    this.obj = JSON.parse(options.obj);
    console.log(this.obj, 888888885);
    this.createOrders(this.obj);
  },
  methods: {
    // 点击立即支付
    async btn() {
      let res = await this.$api.prepay({
        order_sn: this.orDerobj.order_sn,
        payment: 'wechat'
        // return_url: '/pages/payResult/payResult'
      });
      if (res.code == 1) {
        wx.requestPayment({
          //成功之后，调用小程序微信支付
          timeStamp: res.data.pay_data.timeStamp,
          nonceStr: res.data.pay_data.nonceStr,
          package: res.data.pay_data.package,
          signType: 'MD5',
          paySign: res.data.pay_data.paySign,
          success: res => {
            //支付成功的回调
            // console.log('支付成功', JSON.stringify(res));
            // this.show = true;
            uni.navigateTo({
              url: '/pages/orderJie/orderJie'
            });
          },
          fail: () => {
            // uni.showToast({
            //   icon: 'none',
            //   title: '支付失败'
            // });
          }
        });
      }
    },
    async createOrders(obj) {
      let n = await this.$api.createOrder(obj);
      this.orDerobj = n.data;
      this.timestamp = n.data.ext_arr.expired_time - n.data.createtime;
    }
  }
};
</script>

<style lang="scss">
* {
  box-sizing: border-box;
}
.btn {
  position: fixed;
  bottom: 50rpx;
  width: 686rpx;
  height: 98rpx;
  line-height: 98rpx;
  text-align: center;
  background: linear-gradient(151deg, #d4c390 0%, #ccb983 53%, #d3c086 100%);
  border-radius: 4rpx 4rpx 4rpx 4rpx;
  opacity: 1;
  font-size: 32rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
</style>
